<script>
import Footer from '../components/Footer.vue';
import axios from 'axios';
export default {
  name: 'EditUserAddress',
  data() {
    return {
      businessId: this.$route.query.businessId,
      daId: this.$route.query.daId,
      user: {},
      deliveryAddress: {
        contactName: '',
        contactTel: '',
        address: ''
      }
    }
  },
  async created() {
    try {
      const token = sessionStorage.getItem('jwt')
      const response = await axios.get('/user', {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token.slice(1, -1)}` // 添加认证令牌
        }
      })
      this.user.value = response.data
    } catch (err) {
      console.error('获取用户信息失败:', err)
    }
    console.log(this.daId);
  },
  components: {
    Footer
  },
  methods: {
    // 编辑用户地址
    editUserAddress() {
      // 表单验证
      if (this.deliveryAddress.contactName == '') {
        alert('联系人姓名不能为空！');
        return;
      }
      if (this.deliveryAddress.contactTel == '') {
        alert('联系人电话不能为空！');
        return;
      }
      if (this.deliveryAddress.address == '') {
        alert('联系人地址不能为空！');
        return;
      }
      const updateDto = {
        contactName: this.deliveryAddress.contactName,
        contactTel: this.deliveryAddress.contactTel,
        address: this.deliveryAddress.address
      };

      console.log('提交的更新数据:', updateDto);

      const token = sessionStorage.getItem('jwt');
      // 使用PATCH请求更新地址
      this.$axios.patch(`/addresses/${this.daId}`, updateDto,{
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token.slice(1, -1)}` // 添加认证令牌
        }
      })
          .then(response => {
            if (response.status === 200 || response.status === 201) {
              alert('地址更新成功！');
              this.$router.push({
                path: '/userAddress',
                query: {
                  businessId: this.businessId
                }
              });
            } else {
              // 根据您的后端返回格式调整错误处理
              const errorMsg = response.data?.message || '更新地址失败！';
              alert(errorMsg);
            }
          })
          .catch(error => {
            console.error('更新地址失败:', error);
            let errorMsg = '更新地址失败！';

            if (error.response) {
              // 服务器返回了错误状态码
              const response = error.response;
              if (response.data && response.data.message) {
                errorMsg = response.data.message;
              } else {
                errorMsg = `更新失败: ${response.status} ${response.statusText}`;
              }
            } else if (error.request) {
              errorMsg = '网络错误，请检查网络连接';
            }

            alert(errorMsg);
          });
    }
  }
}
</script>

<template>
  <div class="wrapper">
    <header>
      <p>编辑送货地址</p>
    </header>

    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">
          联系人：
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
        </div>
      </li>
      <li>
        <div class="title">
          电话：
        </div>
        <div class="content">
          <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
        </div>
      </li>
      <li>
        <div class="title">
          收货地址：
        </div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
        </div>
      </li>
    </ul>

    <div class="button-add">
      <button @click="editUserAddress">更新</button>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<style scoped>
/*************** 总容器 ***************/
.wrapper {
  width: 100%;
  height: 100%;
}

/*************** header ***************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  /*保证在最上层*/
  z-index: 1000;
}

/*************** （表单信息） ***************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0vw 3vw;
  display: flex;
}

.wrapper .form-box li .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}
.wrapper .form-box li .content{
  flex: 1;
  display: flex;
  align-items: center;
}
.wrapper .form-box li .content input{
  border: none;
  outline:  none;
  width:  100%;
  height: 4vw;
  font-size: 3vw;
}
.wrapper .button-add{
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}
.wrapper .button-add button{
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  border: none;
  outline: none;
  border-radius: 4px;
  color: #fff;
  background-color: #38CA73;
}
</style>